<div th:fragment="html">
    <div class="page_container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/main}">快递系统管理</a></li>
                <li class="breadcrumb-item"><a th:href="@{/job}">个人</a></li>
                <li class="breadcrumb-item active">工作信息</li>
            </ol>
        </nav>
        <div class="jumbotron jumbotron-information">
            <div class="row">
                <div class="col-sm-4" id="packet_information" v-if="user.baseInfo.position=='快递员'">
                    <dl>
                        <dt>派送中</dt>
                        <dd>{{packet_send_num}}</dd>
                        <dt>已签收</dt>
                        <dd>{{packet_finish_num}}</dd>
                    </dl>
                </div>
                <div class="col-sm-4" id="input_information">
                    <dl>
                        <dt>基础工资</dt>
                        <dd>[[${session.user.baseInfo.salary}]]</dd>
                        <dt v-if="user.baseInfo.position=='快递员'">当月提成</dt>
                        <dd v-if="user.baseInfo.position=='快递员'">{{roundFun(packet_finish_num*rule.oneFee+fee,2)}}</dd>
                    </dl>
                </div>
                <div class="col-sm-4" id="salary_information">
                    <dl>
                        <dt>历史收入</dt>
                        <dd>
                            <div class="row">
                                <div class="col-sm-2">年份</div>
                                <input class="form-control col-sm-4" placeholder="请输入年份" v-model.trim="year">
                                <div class="col-sm-2"></div>
                                <button class="btn btn-info col-sm-4" @click="mountMoney">查询</button>
                            </div>
                            <canvas class="col-sm-12" id="money_graph" ></canvas>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="order_search">
            <div class="form-row align-items-center">
                <div class="col-sm-1 my-1">
                    <input type="text" class="form-control" id="order_id" placeholder="请输入快递单号" v-model.trim="oid"/>
                </div>
                <div class="col-sm-1 my-1">
                    <input type="text" class="form-control" id="order_name" placeholder="请输入签收人姓名" v-model.trim="username"/>
                </div>
                <div class="col-sm-1 my-1">
                    <input type="text" class="form-control" id="order_phone" placeholder="请输入联系电话"  v-model.trim="phone"/>
                </div>
                <div class="col-sm-1 my-1">
                    <select class="custom-select" id="staff_place" v-model.trim="address">
                        <option selected value="">分配区域</option>
                        <template v-for="bean in areas">
                            <option v-if="bean.areaName!='未分配区域'" v-bind:value="bean.areaName">{{bean.areaName}}</option>
                        </template>
                    </select>
                </div>
                <div class="col-sm-1 my-1">
                    <input type="text" class="form-control" id="order_product" placeholder="请输入物品名称"  v-model.trim="product"/>
                </div>
                <div class="col-sm-1 my-1">
                    <select class="custom-select" id="order_status" v-model.trim="status">
                        <option selected value="">状态</option>
                        <option value="0">未派送</option>
                        <option value="1">派送中</option>
                        <option value="2">已签收</option>
                        <option value="3">问题件</option>
                        <option value="4">已处理</option>
                    </select>
                </div>
                <div class="col-auto my-1">
                    <button class="btn btn-sm btn-info" @click="search">搜索</button>
                </div>
            </div>
        </div>
        <div class="order_information">
            <table class="table">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">快递ID</th>
                    <th scope="col">签收人姓名</th>
                    <th scope="col">联系电话</th>
                    <th scope="col">签收地址</th>
                    <th scope="col">物品</th>
                    <th scope="col">重量</th>
                    <th scope="col">邮费</th>
                    <th scope="col">到站时间</th>
                    <th scope="col">状态</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="bean in show_beans">
                    <tr>
                        <td>{{bean.oid}}</td>
                        <td>{{bean.username}}</td>
                        <td>{{bean.phone}}</td>
                        <td>{{bean.area.areaName}}</td>
                        <td>{{bean.product}}</td>
                        <td>{{bean.weight}}</td>
                        <td>{{bean.price}}</td>
                        <td>{{new Date(bean.date).toLocaleString()}}</td>
                        <td>{{status_val[bean.status]}}</td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
        <div th:include="include/public/pagination.html"></div>
    </div>
</div>